

<template>
  <div class="showTable">
    <div class="table-list-header" :class="{'active':open}" >
        <span>问题{{parseInt(index)+1}}</span>
        <div>
            
            <mu-button small icon class="no-margin float-right" v-if="index == 0" @click="$emit('add')">
                <mu-icon color="primary" value="add_circle"></mu-icon>
            </mu-button>
            <mu-button small icon class="no-margin float-right" v-if="index > 0" @click="$emit('plus',index)">
                <mu-icon color="primary" value="delete"></mu-icon>
            </mu-button>
            <mu-button  flat color="primary" small class="no-margin float-right"  style="min-width:0.2rem;margin-top: 0.05rem !important;" @click="open = !open">
                <!-- {{!open?'展开':'收起'}} -->
                <i class="iconfont iconangle-up" v-show="open"></i>
                <i class="iconfont iconangle-down" v-show="!open"></i>
            </mu-button>
        </div>
    </div>
    <div class="table-list-body" :class="{'active':open}">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="">
            <mu-form-item label="问题类型" class="form-between required">
               <span class="normal-font-size form-right-text" @click="typeCon = true">{{data.problemTypeId?typeName:'请选择'}}</span>
                <!-- <mu-select
                v-model="data.problemTypeId"
                placeholder="请选择"
                popover-class="lan-popover-select"
                >
                <mu-option
                    v-for="(list,index) in problemTypeList"
                    :key="index"
                    :label="list.problemTypeId"
                    :value="list.id"
                ></mu-option>
                </mu-select> -->
                <i v-if="data.problemTypeId && data.problemTypeId != -1" class="iconfont iconwenhao" @click="openTips"></i>
                <i v-if="!data.problemTypeId || data.problemTypeId == -1" class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="备注" class="inline-item required" v-if="data.problemTypeId == -1">
                <mu-text-field v-model="data.problemElseRemark" multi-line placeholder="请输入" :rows="3" :rows-max="5" ></mu-text-field>
            </mu-form-item>
            <mu-form-item  label="问题等级" class="form-between lan-mu-radio required" >
                <mu-radio v-model="data.problemLevel" value="1" label="一般"></mu-radio>
                <mu-radio v-model="data.problemLevel" value="2" label="较大"></mu-radio>
                <mu-radio v-model="data.problemLevel" value="3" label="重大"></mu-radio>
            </mu-form-item>
            <mu-form-item label="问题描述" class="inline-item required">
                <mu-text-field v-model="data.problemDescription" multi-line placeholder="请输入" :rows="4" :rows-max="8" ></mu-text-field>
            </mu-form-item>
            <mu-form-item label="平面图标记" class="inline-item required">
                <div style="height:1.5rem;width:100%;line-height:1.2rem;text-align:center;margin:0;" v-if="!areaInfor.photoUrl">暂无平面图(请先选择区域)</div>
                <MapShow :single="true" :width="'100%'" :enableClick="true"  :url="areaInfor.photoUrl" v-model="data.floorPlanTag" v-else></MapShow>
            </mu-form-item>
            <mu-form-item label="整改期限" class="required">
                <mu-select
                v-model="data.rectifyDto.days"
                placeholder="请选择"
                popover-class="lan-popover-select"
                 @change="qixianChange"
                >
                <mu-option
                    v-for="(list,index) in rateList"
                    :key="index"
                    :label="list==0?'立即整改':list+'天'"
                    :value="list"
                ></mu-option>
                </mu-select>
                <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item  label="现场整改" class="form-between lan-mu-radio required" v-if="qixian">
                <mu-radio v-model="data.rectifyDto.isCurrentRect" value="0" label="是"></mu-radio>
                <mu-radio v-model="data.rectifyDto.isCurrentRect" value="1" label="否"></mu-radio>
            </mu-form-item>
            <mu-form-item label="整改要求" class="inline-item required">
                <mu-text-field v-model="data.rectifyDto.rectificationRequirements" multi-line placeholder="请输入" :rows="4" :rows-max="8" ></mu-text-field>
            </mu-form-item>
            
            <mu-form-item label="责任单位" class="form-between required" >
                <span class="normal-font-size form-right-text" @click="pojectOpen = true">{{data.rectifyDto.responsibleUnitId?unitName:'请选择'}}</span>
                <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="现场照片" class="inline-item required" style="padding-bottom:0.15rem;">
                <div v-for="(item,index) in data.scenePhotos" :key="index" class="img-box">
                    <img :src="item" :preview="index" />
                    <mu-icon class="close" value="close" @click="deleteImg(index)"></mu-icon>
                </div>
                <FileUpload @successed="imgSuccess" v-if="data.scenePhotos.length < 5"></FileUpload>
            </mu-form-item>
            <mu-form-item label="整改结果描述" class="inline-item required" v-if="(qixian && data.rectifyDto.isCurrentRect == '0')">
                <mu-text-field v-model="data.rectifyDto.rectificationResult" multi-line placeholder="请输入" :rows="4" :rows-max="8" ></mu-text-field>
            </mu-form-item>
            <mu-form-item label="整改责任人" class="form-between required" >
                <span class="normal-font-size form-right-text" @click="gouseropen(1)">{{data.rectifyDto.responsibleUserId?unitUserName:'请选择'}}</span>
                <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="复查人" class="form-between required" v-if="!(qixian && data.rectifyDto.isCurrentRect == '0')">
                <span class="normal-font-size form-right-text" @click="gouseropen(2)">{{data.rectifyDto.reviewUser?reviewUser:'请选择'}}</span>
                <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
            <mu-form-item label="抄送人" class="form-between required" >
                <span class="normal-font-size form-right-text" @click="gouseropen(3)">{{data.rectifyDto.rectCopyUserIds.length?copyUserList:'请选择'}}</span>
                <i class="iconfont angle-left iconangle-right"></i>
            </mu-form-item>
        </mu-form>
    </div>
    <!-- 责任单位 -->
    <Org ref="org" v-if="pojectOpen" :open="pojectOpen" :customRoot="projectData" :orgType="'currContacts'" @change="orgChange" @close="pojectOpen = false" @confirm="pojectOpen = false"></Org>
    <!-- 选人 -->
    <User ref="User" v-if="userOpen" :multiple="multipleUser" :open="userOpen" :orgType="'currOrgProject'" :customRoot="projectData" @change="userChange" @close="userOpen = false"></User>
    <!-- 选择问题类型 -->
    <Qes ref="Qes" v-if="typeCon"  :open="typeCon"  @close="typeCon=false" @confirm="typeCon=false" @change="typeChange"></Qes>
  </div>
</template>

<script>
    import FileUpload from "@/fileUpload/FileUpload.vue"
    import { MessageBox } from "mint-ui";
    import User from "@/select/user/User";
    import Org from "@/select/org/Org";
    import Qes from "@/quseType/Qes.vue"
  export default {
    name: 'checkTable',
    components: {
     FileUpload,Org,User,Qes
    },
    props: {
      projectData: {//项目信息
        type: Array,
        default: () => []
      },
      areaInfor: {//区域信息
        type: Object,
        default: () => {}
      },
      data: {
        type: Object,
        default: () => {}
      },
      index: {
        type: String,
        default: () => '0'
      },
      len: {
        type: String,
        default: () => '0'
      },
    },
    model: {
      prop: "data",
    },
    data() {
      return {
        open:true,
        tableHTML:'',
        form:{
        //     [{
        //     "problemTypeId": "string", //--问题类型id
        //     "problemElseRemark": "string", //--问题类型选则其它时候的备注
        //     "problemLevel": 0, //--问题等级 1一般 2较大 3重大
        //     "scenePhotos": "string", ////--现场照片 格式['1','2']
        //     "floorPlanTag": "string", //--平面图标记
        //     "problemDescription": "string", //--问题描述
        //     "rectifyDto": {
        //       "days": 0, //--整改天数 0立即整改
        //       "endTime": "2019-12-14T06:55:15.580Z", //--整改期限
        //       "responsibleUnitId": "string", //--整改单位 -- 责任单位
        //       "responsibleUserId": "string", //--整改人
        //       "rectificationRequirements": "string", //--整改要求
        //         "reviewUser": "string",// --复查人
        //       "isCurrentRect": 0,// --问题必传参数 是否现场整改 0是 1否
        //       "rectCopyUserIds": [ ///--整改抄送人
        //         "string"
        //       ],
        //     }
        //   }],
        },
        problemTypeList:[],
        proUrl:this.$A.baseUrl[0] + "/safety/system/download?fileUrl=",
        pojectOpen:false,
        unitName:'',
        unitUserName:'',
        userOpen:false,
        copyUserList:'',
        reviewUser:'',
        userIndex:'',
        qixian:false,
        multipleUser:false,
        rateList:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],
        typeCon:false,
        typeName:'',
        tyinfor:''
      }
    },
    computed: {},
    async created() {
        console.log(this.data)
        // this.problemTypeList = await this.$A.comData("problemTypeList");
        // this.problemTypeList.push({id:-1,problemTypeId:'其他'})
        
    },
    mounted() {
    },
    watch: {},
    methods: {
      typeChange(value){
        this.typeName = value.problemTypeId
        this.data.problemTypeId = value.id;
        this.tyinfor = value
      },
      deleteImg(index){
        this.data.scenePhotos.splice(index,1)
      },
      imgSuccess(list){
        console.log(list)
        if(list.code == 200){
          this.data.scenePhotos.push(this.proUrl+list.body)
        }
      },
      openTips(id){
          // let obj = this.problemTypeList.filter(o=>o.id == id)
          MessageBox({
            title: '问题规范标准',
            message: this.tyinfor['standard'],
            confirmButtonText: '知道了'
          })
      },
      orgChange(value){
          this.data.rectifyDto.responsibleUnitId = value[0].id;
          this.unitName = value[0].name;
      },
      gouseropen(index){
        this.userIndex = index
        
        if(index == 3){
          this.multipleUser = true
        }else{
          this.multipleUser = false
        }
        this.userOpen = true;
      },
      userChange(value){
        if(this.userIndex == 1){
            this.data.rectifyDto.responsibleUserId = value[0].id;
            this.unitUserName = value[0].employeeName
        }
        if(this.userIndex == 2){
            this.data.rectifyDto.reviewUser = value[0].id
            this.reviewUser = value[0].employeeName
        }
        if(this.userIndex == 3){
            this.data.rectifyDto.rectCopyUserIds = value.map(o=>o.id)
            this.copyUserList = value.map(o=>o.employeeName).join(',')
        }
        this.userOpen = false;
      },
      //整改期限
      qixianChange(value){
          
          // console.log(value.toDateString())
          if(value == '0'){
            this.qixian = true
          }else{
            this.qixian = false
          }
      },



      //获取质量检查表列表
        creatHtml(){
            const str = `<table class="lanTable" border="1" cellspacing="0" cellpadding="3">
                <thead>
                    <tr>
                        <th style="width:0.7rem;">检查项</th>
                        <th>检查内容</th>
                    </tr>
                </thead>
                <tbody>`
            let body = ``
            let data = this.data.itemContentList || [];
            for(let i=0;i<data.length;i++){
                let istr = '<tr >'
                // if(i != 0){
                //     istr = `<tr >`
                // }
                body += istr
                for(let j=0;j<data[i]['contentList'].length;j++){
                    let str = ''
                    if(j==0){
                        str += `<td rowspan="${data[i]['contentList'].length}">${data[i].item}</td>
                        <td>${data[i]['contentList'][j]['contentName']}</td>`
                    }else{
                        str += `<td>${data[i]['contentList'][j]['contentName']}</td>`
                    }
                    body += str+'</tr>'
                }
                
            }
            const footer = `</tbody></table>`
            return str + body + footer
        },
    },
    destroyed() {
    }
  }
</script>

<style lang="scss" scoped>
.showTable{
    width:100%;
    height:100%;
    
     .table-list-header{
        height:0.55rem;
        width:100%;
        border:0.01rem solid #e8e8e8;
        margin:0 !important;
        display:flex;
        justify-content:space-between;
        align-items: center;
        color:#3D3D3D;
        font-size:0.15rem;
        padding:0 0.14rem;
    }
    
    .table-list-body{
        border-top:none;
        height:0;
        overflow:hidden;
        transition: height .3s .1s;
    }
    .table-list-body.active{
        height:auto;
    }
}
</style>

<style lang="scss" scoped>
.img-box{
  width:0.75rem;
  height:0.75rem;
  margin:0.1rem;
  position: relative;
  img{
    height:100%;
    width:100%;
  }
  .close{
    position: absolute;
    height:0.2rem;
    width:0.2rem;
    line-height:0.2rem;
    font-size:0.15rem;
    top: 0.04rem;
    right: 0.04rem;
    color:#fff;
    border-radius: 50%;
    text-align:center;
    background-color: #FF4242;
  }
}
.lanTable{
      border-collapse: collapse;
      width:100%;
      border:1px solid #E0E0E0;
      border-spacing: 2px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 0.11rem;
      background-color:#FCFCFC;
      thead > tr{
        //   background-color:#E0E0E0;
          th{
              font-weight: 500;
              text-align:center;
              padding:0.05rem;
          }
      }
      tr > td{
          padding:0.05rem;
      }
  }
</style>
